<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>注册页</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .demo-login-container{width: 320px; margin: 10px auto ;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form"  lay-filter="user-filter">
    <div class="demo-login-container">
        <div class="layui-form-item" style="font-size:25px;text-align: center; color:#16b777">个人信息</div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value=""  readonly lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-male"></i>
                </div>
                <select name="sex" lay-filter="aihao">
                    <option value=""></option>
                    <option value="0">女</option>
                    <option value="1">男</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-date"></i>
                </div>
                <input type="date" name="birth" lay-verify="required" lay-reqtext="请填写生日" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="user-update">完善资料</button>
        </div>
    </div>
</form>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="/layui/layui.js"></script>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;

        // 使用el表达式获取用户名
        var username = '${user.username}'  ; // {username}  =>{username:username}
        console.log("username="+username)
        // 数据回显  发送异步请求  获取用户详细信息
        $.get('/user?method=getUserByUserName',{username},function (res) {  // user
            form.val('user-filter', res);
            //表单的重新渲染
            form.render();
        },'JSON')

        // 提交事件
        form.on('submit(user-update)', function(data){
            var field = data.field; // 获取表单字段值
            // 此处可执行 Ajax 等操作
            $.ajax({
                url:'/user?method=updateUser',   //  后台接口
                type:'post',  //  请求方式
                data:field,  // 请求时需要携带的数据  {username:'tom',password:'123456'}
                dataType:'JSON', // 响应数据格式
                success:function (res) {    //  请求成功回调函数     res  -> 接口的响应结果
                    if(res.code==0){
                        layer.msg(res.msg,{icon:1,time:3000},function () {
                            //关闭弹出层
                            var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                            parent.layer.close(index); // 再执行关闭
                        })
                    }else {
                        layer.msg(res.msg,{icon:2})
                    }
                }
            })
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>

